<template>
  <div>
    <page-main>
      <div style="display: flex; flex-wrap: wrap;">
        <div
          style="
                        padding: 4px 4px;
                        background-color: #8fbcd9;
                        color: #fff;
                        height: 29px;
                        width: 95px;
"
        >
          统计信息->
        </div>
        <div class="sanjiaoxing"></div>
        <div class="infoBox point-total" @click="showPatrolPointDialog(tongjiInfo.point_numbers)">
          巡查点: {{ tongjiInfo.point_numbers }}
        </div>
        <div
          class="infoBox unqualified"
          @click="showPatrolPointDialog(tongjiInfo.danger_point_total, 'danger')"
        >
          不合格点: {{ tongjiInfo.danger_point_total }}
        </div>
        <div
          class="infoBox overdue"
          @click="showPatrolPointDialog(tongjiInfo.task_point_not_numbers, 'out')"
        >
          超期巡查点: {{ tongjiInfo.task_point_not_numbers }}
        </div>
        <div
          class="infoBox"
          @click="showPatrolPointDialog(tongjiInfo.point_not_used_numbers, 'not_used')"
        >
          未启用点: {{ tongjiInfo.point_not_used_numbers }}
        </div>
        <!-- <div class="infoBox">巡查员: {{ tongjiInfo }}</div> -->
      </div>
    </page-main>
    <page-main>
      <div style="margin-top: 10px;">
        <span style="margin-right: 10px;">年:</span>
        <el-date-picker
          v-model="year"
          type="year"
          value-format="YYYY"
          placeholder="选择年"
        ></el-date-picker>
        <span style="margin-right: 10px; margin-left: 15px;">月:</span>
        <el-date-picker
          v-model="month"
          type="month"
          value-format="MM"
          placeholder="选择月"
        ></el-date-picker>
        <el-button style="margin-left: 15px;" type="primary" @click="getTable">搜索</el-button>
        <el-button type="warning" @click="refreshBtn">重置</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 15px;"
        v-loading="tableDataLoading"
      >
        <template #empty> 无 </template>
        <!-- <el-table-column prop="date" label="ID" width="50"></el-table-column> -->
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="日期">
          <template #default="scope"> {{ scope.row.date2 }} &nbsp; {{ scope.row.date3 }} </template>
        </el-table-column>
        <el-table-column label="巡查人员"> </el-table-column>
        <el-table-column prop="inspect_numbers" label="已检数">
          <template #default="scope">
            <div
              class="defaultClass hoverClass"
              @click="showPatrolRecordDialog(scope.row.inspect_numbers, 'inspect', scope.row.date2)"
            >
              {{ scope.row.inspect_numbers }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="超时检查">
          <template #default="scope">
            <div
              class="defaultClass overdue-num"
              @click="showPatrolRecordDialog(scope.row.out_numbers, 'out', scope.row.date2)"
            >
              {{ scope.row.out_numbers }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="合格率">
          <template #default="scope">
            <span v-if="scope.row.point_numbers == 0"> 0% </span>
            <span v-else>{{ ((scope.row.hege / scope.row.point_numbers) * 100).toFixed(0) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="hege" label="合格">
          <template #default="scope">
            <div
              class="defaultClass"
              :class="scope.row.hege ? 'hoverClass' : ''"
              @click="showPatrolRecordDialog(scope.row.hege, 'undanger', scope.row.date2)"
            >
              {{ scope.row.hege }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="yiban" label="一般">
          <template #default="scope">
            <div
              class="defaultClass"
              :class="scope.row.yiban ? 'hoverClass' : ''"
              @click="showPatrolRecordDialog(scope.row.yiban, 'yiban', scope.row.date2)"
            >
              {{ scope.row.yiban }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="yanzhong" label="严重">
          <template #default="scope">
            <div
              class="defaultClass"
              :class="scope.row.yanzhong ? 'hoverClass' : ''"
              @click="showPatrolRecordDialog(scope.row.yanzhong, 'yanzhong', scope.row.date2)"
            >
              {{ scope.row.yanzhong }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          :total="tableDataInfo.total"
          layout="total,prev, pager, next, jumper"
          background
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </page-main>
    <el-dialog v-model="patrolPointdialogVisible" width="60%">
      <patrolPoint v-if="patrolPointdialogVisible" :patrolPointType="patrolPointType"></patrolPoint>
    </el-dialog>
    <el-dialog v-model="patrolRecordDialogVisible" width="60%">
      <patrolRecord
        v-if="patrolRecordDialogVisible"
        :patrolRecordType="patrolRecordType"
        :patrolRecordTypeDate="patrolRecordTypeDate"
      ></patrolRecord>
    </el-dialog>
  </div>
</template>

<script>
import patrolPoint from '@/views/unitPerformanceDataStatistics/components/patrolPoint.vue'
import patrolRecord from '@/views/unitPerformanceDataStatistics/components/patrolRecord.vue'
export default {
  components: {
    patrolPoint,
    patrolRecord
  },
  data() {
    return {
      tableData: [],
      tableDataLoading: false,
      tableDataInfo: '',
      tongjiInfo: [],
      year: null,
      month: null,
      patrolPointdialogVisible: false,
      patrolPointType: '',
      patrolRecordDialogVisible: false,
      patrolRecordType: '',
      patrolRecordTypeDate: ''
    }
  },
  created() {
    this.getInfoData()
    this.getTable()
  },
  methods: {
    showPatrolRecordDialog(num, type, date) {
      this.patrolRecordType = type
      this.patrolRecordTypeDate = date
      if (num) {
        this.patrolRecordDialogVisible = true
      }
    },
    showPatrolPointDialog(num, type, id) {
      this.patrolPointType = type
      if (num) {
        this.patrolPointdialogVisible = true
      }
    },
    // 重置按钮
    refreshBtn() {
      this.year = null
      this.month = null
      this.getTable()
    },
    // 顶部数据
    getInfoData() {
      this.$api.post('/unit/UnitDuty/total').then((res) => {
        this.tongjiInfo = res.data
      })
    },
    // 表格数据
    getTable() {
      this.tableDataLoading = true
      let year = this.year
      let month = this.month
      // 如果是1-9月,去掉前面的0
      if (month != null) {
        if (month.slice(0, 1) == 0) {
          month = month.slice(1)
        }
      }
      this.$api
        .post('/unit/UnitDuty/dailyMonth', { year, month })
        .then((res) => {
          this.tableData = res.data
        })
        .finally(() => {
          this.tableDataLoading = false
        })
    }
  }
}
</script>

<style scoped lang="scss">
.total-num {
    cursor: pointer;
    color: blue;
}
.unqualified-num {
    cursor: pointer;
    color: #f00;
}
.overdue-num {
    cursor: pointer;
    color: #ffa500;
}
.defaultClass {
    cursor: default;
}
.hoverClass {
    cursor: pointer;
    color: blue;
}
.block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.sanjiaoxing {
    border-style: solid;
    border-width: 14px 14px 14px 10px;
    border-color: transparent transparent transparent #8fbcd9;
    width: 0;
    height: 0;
}
.infoBox {
    border: 1px solid #ccc;
    padding: 4px 10px;
    margin-right: 20px;
    cursor: pointer;
    &.point-total {
        @extend .total-num;
    }
    &.unqualified {
        @extend .unqualified-num;
    }
    &.overdue {
        @extend .overdue-num;
    }
}
</style>
